<template>
    <div class="header" style="background:#515a6e;">
        <div class="logo"><Icon type="ios-leaf" style="font-size:30px;" />司法推广CMS</div>
        <div class="menu-item" style="height:70px;float:left;">
            <Menu mode="horizontal" theme="dark" :active-name="lv1_index" @on-select="handleSelect">
                <MenuItem v-for="(item, k) in menus" :key="k" :name="'index_'+k">
                    <Icon :type="item.icon" />
                    {{item.title}}
                </MenuItem>
            </Menu>
        </div>
        <div class="user-info">
            <Select placeholder="选择站点" v-model="site_id" filterable style="width:50%;margin-right:20px;" @on-change="change_site">
                <Option :key="r.id" v-for="(r, id) in site" :value="r.id">{{r.name}}</Option>
            </Select>
            <Dropdown @on-click="handleCommand" trigger="click">
                <a href="javascript:void(0)">
                    <img class="avatar" :src="avatar"> <span style="margin-left:50px;color:#fff;">{{username}}</span>
                </a>
                <DropdownMenu slot="list">
                    <DropdownItem name="center"><Icon type="md-options" /> 个人设置</DropdownItem>
                    <DropdownItem name="logout"><Icon type="md-log-out" /> 退出</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        
    </div>
</template>
<script>
    export default {
        data() {
            return {
                name:pub.admin('name'),
                nickname:pub.admin('nickname'),
                avatar: pub.admin('avatar'),
                user: pub.admin('user'),
                menus: [],
                lv1_index: '',
                site:[],
                site_id:0,
            }
        },
        created (){
            this.menus = pub.admin('menu');
            this.lv1_index = pub.getCache('lv1_index');
            if(!this.lv1_index) {
                this.lv1_index = 'index_1';
            }
            setTimeout(() => {
                this.handleSelect(this.lv1_index);
            });
            //加载站点列表
            this.load_site();
            this.site_id = pub.getCache('site');
        },
        computed:{
            //根据路由自动展开菜单
            onRoutes(){
                let name= this.$route.name;
                if(/^news/.test(name)) return '/news';
                
                return this.$route.path;
            },
            //计算属性
            username(){
                if(this.nickname) return this.nickname;
                if(this.name) return this.name;
                if(this.user) return this.user;
            }
        },
        mounted(){
            //子模块保存成功之后
            this.bus.$on('change_userinfo', r => {
                this.avatar = r.avatar;
                this.nickname = r.nickname;
                this.name = r.name;
                this.user = r.user;

                var admin = pub.getCache('admin');
                admin.avatar = r.avatar;
                admin.nickname = r.nickname;
                admin.name = r.name;
                admin.user = r.user;
                pub.setCache('admin', admin);
            });
            //修改站点信息后，刷新缓存
            this.bus.$on('refresh_site', r => {
                this.load_site();
            });
        },
        methods:{
            load_site() {
                //加载站点列表
                this.$axios.get(pub.apiDomain + '/site/map').then((res) => {
                    this.site = res.d;
                    pub.setCache('site_list', this.site);
                })
            },
            //注册并触发事件到总线
            handleSelect(index) {
                this.bus.$emit('change_menu1', index);
                pub.setCache('lv1_index', index);
            },
            handleCommand(command) {
                if(command == 'logout'){
                    pub.emptyCacle();
                    this.$router.push('/login');
                }
                if(command == 'center'){
                    this.$router.push('/center');
                }
            },
            change_site(){
                pub.setCache('site', this.site_id);
                this.bus.$emit('change_site');  //注册事件，让其他组件触发刷新列表操作
            }
        }
    }
</script>
<style scoped>
    .header {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        font-size: 22px;
        line-height: 60px;
        color: #fff;
    }
    .ivu-menu-item.ivu-menu-item-active{background:#47a;}
    .header .logo{
        float: left;
        width:250px;
        height: 60px;
        text-align: center;
    }
    .user-info {
        float: right;
        padding-right: 20px;
        font-size: 16px;
        color: #fff;
    }
    .user-info .el-dropdown-link{
        position: relative;
        display: inline-block;
        padding-left: 50px;
        color: #fff;
        cursor: pointer;
        vertical-align: middle;
    }
    .avatar{
        position: absolute;
        left:-5px;
        top:5px;
        width:50px;
        height:50px;
        border-radius: 50%;
    }
    .el-menu--horizontal{border-bottom: none;}
    .el-menu-item{height: 70px;line-height: 70px;font-size:16px;}
    .el-menu-item i{color:#fff;}
</style>
<style>
.el-submenu__title i{color:#fff;}
.el-submenu__title{font-size:16px;}
.el-menu--horizontal > .el-submenu .el-submenu__title{height: 70px!important;line-height: 70px!important;}
.header .is-active{background:#497c90!important;}
.el-submenu__title div{height: 70px;line-height:70px;}
.header .is-active .el-submenu__title{background-color: #497c90!important;}
</style>
<style scoped>
.user-info .ivu-icon{position: relative; top:-1px;}
</style>

